<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cutting</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .dv {
            width: 500px;
            height: 300px;
            margin: 200px auto;
            position: relative;
        }
        .dv ul {
            width: 100%;
            height: 100%;
            list-style: none;
            /*transform: rotate3d(1,1,0,-30deg);*/
            /*transform-style: preserve-3d;*/
        }
        .dv ul li {
            width: 20%;
            height: 100%;
            float: left;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.5s;
        }
        .dv li span {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
        .dv li>span:nth-of-type(1){
            /*background: url("https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1960687558,3920970823&fm=26&gp=0.jpg");*/
            background: url("https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4063230015,918326281&fm=26&gp=0.jpg");
            transform: translateZ(150px);
        }
        .dv li>span:nth-of-type(2){
            /*background: url("https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1475073400,1753826743&fm=26&gp=0.jpg");*/
            background: url("https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1388174552,4196883938&fm=200&gp=0.jpg");
            transform: translateY(-150px) rotateX(90deg);
        }
        .dv li>span:nth-of-type(3){
            /*background: url("https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3552513652,1095400315&fm=26&gp=0.jpg");*/
            background: url("https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1138303604,1619264129&fm=26&gp=0.jpg");
            transform: translateZ(-150px) rotateX(180deg);
        }
        .dv li>span:nth-of-type(4){
            /*background: url("https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2499163165,198957584&fm=200&gp=0.jpg");*/
            background: url("https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3372907541,1722073626&fm=27&gp=0.jpg");
            transform: translateY(150px) rotateX(-90deg);
        }
        .dv li:nth-of-type(2)>span{
            background-position:  -100% 0;
        }
        .dv li:nth-of-type(3)>span{
            background-position:  -200% 0;
        }
        .dv li:nth-of-type(4)>span{
            background-position:  -300% 0;
        }
        .dv li:nth-of-type(5)>span{
            background-position:  -400% 0;
        }
        .pre,.next {
            width: 60px;
            height: 60px;
            background-color: #ccc;
            text-align: center;
            line-height: 60px;
            position: absolute;
            color: #fff;
            top: 50%;
            font-size: 40px;
            transform: translate(0,-50%);
        }
        .pre {
            left: 0;
        }
        .next {
            right: 0;
        }

    </style>
</head>
<body>
<div class="dv">
    <ul>
        <li><span></span><span></span><span></span><span></span></li>
        <li><span></span><span></span><span></span><span></span></li>
        <li><span></span><span></span><span></span><span></span></li>
        <li><span></span><span></span><span></span><span></span></li>
        <li><span></span><span></span><span></span><span></span></li>
    </ul>
    <div class="pre"><
    </div>
    <div class="next">></div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$ (function () {
    var index = 0;
    var flag = true;
    $('.next').on('click',function () {
        if (flag) {
            flag = false;
            index--;
            $('li').each(function (key,value) {
                $(this).css({
                    "transform":"rotateX("+(index*90)+"deg)",
                    "transition-delay":(key*0.2)+"s"
                })
            });
            setTimeout(function(){
                flag = true
            },1000)
        }
    });
    $('.pre').on('click',function () {
        if (flag) {
            flag = false;
            index++;
            $('li').each(function (key,value) {
                $(this).css({
                    "transform":"rotateX("+(index*90)+"deg)",
                    "transition-delay":(key*0.2)+"s"
                })
            });
            setTimeout(function(){
                flag = true
            },1000)
        }
    })
})
</script>
</body>
</html>